<template>
  <div class="growth">
    <div
      class="left"
      :class="{ 'left-hide': leftHide }"
      ref="leftRef"
    >
      <div class="left-panel">
        <el-scrollbar>
          <div class="bimNav-title">
            <div
              @click="toolItemClickHandle(item)"
              v-for="(item, index) in toolData"
              :key="index"
              :class="{
                'is-active': activeTool === item.value
              }"
            >
              {{ item.label }}
              <p class="line"></p>
            </div>
          </div>
          <div v-show="activeTool == 'topic'">
            <div
              class="chart-wrapper flex-y"
              style="padding-top: 0px"
            >
              <!-- <div class="title flex-x cross-center">
                <img
                  class="title-prefix"
                  :src="TitlePrefix"
                  alt="标题前缀"
                />
                <span>项目统计</span>
              </div>
              <div class="project-num">
                <div class="project-img">
                  <img
                    :src="project"
                    alt="项目总数背景"
                  />
                  <div>
                    <div class="project-num-title">
                      项目总数
                    </div>
                    <div class="project-num-build">
                      在建 {{ buildingNum }}个
                    </div>
                  </div>
                </div>
                <div>
                  <div class="project-num-all">
                    {{ projectAllTotal }}
                    <div
                      style="
                        font-size: 16px;
                        display: inline;
                      "
                    >
                      个
                    </div>
                  </div>
                  <div class="project-num-build">
                    完成 {{ builtNum }}个
                  </div>
                </div>
              </div> -->
              <div class="project-sum">
                <div class="project-sum-title">
                  <div>项目总数</div>
                  <div>
                    <span class="project-sum-num">{{
                      governmentProjectsNumber +
                      enterpriseProjectsNumber
                    }}</span
                    >个
                  </div>
                </div>
                <div class="pie-marker">
                  <div class="project-sum-pie">
                    <chart
                      chart-id="type-1-sum"
                      :chart-height="120"
                      chart-width="100%"
                      :options="chart1_1_Options"
                    />
                  </div>
                  <div class="project-sum-marker"></div>
                </div>

                <div>
                  <div class="project-sum-content">
                    <div
                      class="project-sum-content-zfxmline"
                    ></div>
                    <div>政府项目</div>
                    <div class="project-sum-content-num">
                      {{ governmentProjectsNumber }}个
                    </div>
                  </div>
                  <div class="project-sum-content">
                    <div
                      class="project-sum-content-qyxmline"
                    ></div>
                    <div>企业项目</div>
                    <div class="project-sum-content-num">
                      {{ enterpriseProjectsNumber }}个
                    </div>
                  </div>
                </div>
              </div>
              <div class="project-sum">
                <div class="project-sum-title">
                  <div>项目总投资</div>
                  <div>
                    <span class="project-sum-num">{{
                      governmentInvestment +
                      enterpriseInvestment
                    }}</span
                    >亿元
                  </div>
                </div>
                <!-- <div class="project-sum-pie">
                  <chart
                    chart-id="type-1-invest"
                    :chart-height="120"
                    chart-width="100%"
                    :options="chart1_2_Options"
                  />
                </div> -->
                <div class="pie-marker">
                  <div class="project-sum-pie">
                    <chart
                      chart-id="type-1-invest"
                      :chart-height="120"
                      chart-width="100%"
                      :options="chart1_2_Options"
                    />
                  </div>
                  <div class="project-sum-marker1"></div>
                </div>
                <div>
                  <div class="project-sum-content">
                    <div
                      class="project-sum-content-zftzline"
                    ></div>
                    <div>政府投资</div>
                    <div class="project-sum-content-num">
                      {{ governmentInvestment }}亿元
                    </div>
                  </div>
                  <div class="project-sum-content">
                    <div
                      class="project-sum-content-qytzline"
                    ></div>
                    <div>企业投资</div>
                    <div class="project-sum-content-num">
                      {{ enterpriseInvestment }}亿元
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="chart-wrapper flex-y">
              <div
                class="chart-wrapper-content flex-x cross-center"
                style="margin-top: -12px"
              >
                <chart
                  chart-id="type-1-chart1"
                  :chart-height="100"
                  :chart-width="166 + 'px!important'"
                  :options="chart2_1_Options"
                />
                <div class="flex-y cross-start flex-1">
                  <div
                    class="legend flex-x cross-center"
                    v-for="(
                      item, index
                    ) in typeTotalListFixed"
                    :key="index"
                  >
                    <div
                      class="legend-round-icon"
                      :class="item.color"
                    ></div>
                    <span class="legend-title">{{
                      item.type
                    }}</span>
                    <span class="legend-value"
                      >{{ item.count }} 亿元</span
                    >
                  </div>
                </div>
              </div>
            </div>
            <img
              class="line-separator"
              :src="LineSeparator"
              alt="分割线"
            />
            <!-- <div class="chart-wrapper flex-y">
              <div class="title flex-x cross-center">
                <img
                  class="title-prefix"
                  :src="TitlePrefix"
                  alt="标题前缀"
                />
                <span>项目投资</span>
              </div>
              <div class="progress-num">
                完成进度 {{ progressNum }}
              </div>
              <div class="progress-chart">
                <chart
                  chart-id="type-1-chart4"
                  :chart-height="32"
                  chart-width="100%"
                  :options="chart4Options"
                />
              </div>
              <div class="project-investment">
                <div>
                  <div>项目完成投资</div>
                  <div>
                    <div
                      style="
                        font-size: 20px;
                        font-weight: bold;
                        display: inline;
                      "
                    >
                      {{ builtInvestment }}
                    </div>
                    万元
                  </div>
                </div>
                <div>
                  <div>项目总投资</div>
                  <div>
                    <div
                      style="
                        font-size: 20px;
                        font-weight: bold;
                        display: inline;
                      "
                    >
                      {{ buildingInvestment }}
                    </div>
                    万元
                  </div>
                </div>
              </div>
            </div> -->
            <!-- <img
              class="line-separator"
              :src="LineSeparator"
              alt="分割线"
            />
            <div class="chart-wrapper flex-y">
              <div class="title flex-x cross-center">
                <img
                  class="title-prefix"
                  :src="TitlePrefix"
                  alt="标题前缀"
                />
                <span>项目投资占比</span>
              </div>
              <div
                class="
                  chart-wrapper-content
                  flex-x
                  cross-center
                "
              >
                <chart
                  chart-id="type-1-chart2"
                  :chart-height="120"
                  chart-width="100%"
                  :options="chart2Options"
                />
                <div class="flex-y cross-start flex-1">
                  <div
                    class="legend flex-x cross-center"
                    v-for="(item, index) in mapInvestRateVo"
                    :key="index"
                  >
                    <div
                      class="legend-round-icon"
                      :class="item.color"
                    ></div>
                    <span class="legend-title">{{
                      item.type
                    }}</span>
                    <span class="legend-value"
                      >{{ item.total }}个</span
                    >
                  </div>
                </div>
              </div>
            </div> -->
            <div class="bimNavType-title">
              <div
                @click="toolItemClickHandleType(item)"
                v-for="(item, index) in toolData1"
                :key="index"
                :class="{
                  'is-active': activeTool1 === item.value
                }"
              >
                {{ item.label }}
                <p class="line"></p>
              </div>
            </div>
            <!-- <div class="chart-wrapper flex-y">
              <div class="title flex-x cross-center">
                <img
                  class="title-prefix"
                  :src="TitlePrefix"
                  alt="标题前缀"
                />
                <span>实施单位排行</span>
              </div>
              <span class="chart-title">
                <div class="chart-legend-blue"></div>
                总投资
                <div class="chart-legend-yellow"></div>
                项目数
              </span>
              <chart
                chart-id="type-1-chart3"
                :chart-height="150"
                chart-width="100%"
                :options="chart3Options"
              />
            </div> -->
            <!-- <div v-show="activeTool1 == 'government'"> -->
            <!-- 按项目状态 -->
            <div class="chart-wrapper flex-y">
              <div class="title flex-x cross-center">
                <img
                  class="title-prefix"
                  :src="TitlePrefix"
                  alt="标题前缀"
                />
                <span>按项目状态</span>
              </div>
              <span class="chart-title">
                <div class="chart-legend-purple"></div>
                总投资
                <div class="chart-legend-green"></div>
                项目数
              </span>
              <chart
                chart-id="type-1-status"
                :chart-height="150"
                chart-width="100%"
                :options="byStatusOptions"
              />
            </div>
            <img
              class="line-separator"
              :src="LineSeparator"
              alt="分割线"
            />
            <!-- 按项目类型 -->
            <div class="chart-wrapper flex-y">
              <div class="title flex-x cross-center">
                <img
                  class="title-prefix"
                  :src="TitlePrefix"
                  alt="标题前缀"
                />
                <span>按项目类型</span>
              </div>
              <span class="chart-title">
                <div class="chart-legend-light-blue"></div>
                总投资
                <div class="chart-legend-orange"></div>
                项目数
              </span>
              <chart
                chart-id="type-1-type"
                :chart-height="150"
                chart-width="100%"
                :options="byTypeOptions"
              />
            </div>
            <img
              class="line-separator"
              :src="LineSeparator"
              alt="分割线"
            />
            <!-- 按项目区位 -->
            <div class="chart-wrapper flex-y">
              <div class="title flex-x cross-center">
                <img
                  class="title-prefix"
                  :src="TitlePrefix"
                  alt="标题前缀"
                />
                <span>按项目区位</span>
              </div>
              <span class="chart-title">
                <div class="chart-legend-blue"></div>
                总投资
                <div class="chart-legend-yellow"></div>
                项目数
              </span>
              <chart
                chart-id="type-1-zone"
                :chart-height="150"
                chart-width="100%"
                :options="byZoneOptions"
              />
            </div>
            <!-- </div> -->
          </div>
          <div
            v-show="activeTool == 'data'"
            style="padding: 10px"
          >
            <div class="left-content-title">
              <div class="left-content-title-l"></div>
              <p class="left-content-title-r">项目统计</p>
              <Icon
                title="筛选"
                :name="
                  rightFilterPanelVisible
                    ? 'shaixuanshouqi'
                    : 'shaixuan'
                "
                font-size="20"
                :color="
                  rightFilterPanelVisible
                    ? 'rgba(0, 210, 255, 1)'
                    : '#D2E6F0'
                "
                @click.native="
                  rightFilterPanelVisible =
                    !rightFilterPanelVisible
                "
              />
            </div>
            <!-- <div class="right-content-title-l"></div> -->
            <!-- <p class="left-content-title-r">项目统计</p> -->
            <el-form
              v-show="rightFilterPanelVisible"
              label-position="top"
            >
              <el-form-item label="项目周期：" prop="cycle">
                <el-select
                  :popper-append-to-body="false"
                  v-model="form.cycle"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in optionAll.cycleOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="项目区域：" prop="area">
                <el-select
                  style="width: 100%"
                  :popper-append-to-body="false"
                  v-model="form.area"
                >
                  <el-option
                    v-for="item in optionAll.areaOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                label="项目状态："
                prop="status"
              >
                <el-select
                  style="width: 100%"
                  :popper-append-to-body="false"
                  v-model="form.status"
                >
                  <el-option
                    v-for="item in optionAll.statusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="项目类型：" prop="type">
                <el-select
                  style="width: 100%"
                  :popper-append-to-body="false"
                  v-model="form.type"
                >
                  <el-option
                    v-for="item in optionAll.typeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                label="分类方式："
                prop="method"
              >
                <el-select
                  style="width: 100%"
                  :popper-append-to-body="false"
                  v-model="form.method"
                >
                  <el-option
                    v-for="item in optionAll.methodOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-form>
            <Chart1
              class="left-content-echart"
              :data="statisticsData"
            />
          </div>
        </el-scrollbar>
      </div>

      <div
        class="left-close"
        @click="leftHide = !leftHide"
      ></div>

      <div
        class="bar"
        @mousedown.prevent="handleLeftMouseDown"
      ></div>
    </div>

    <index-right></index-right>
  </div>
</template>

<script>
import { squareKilometer } from '@/utils/constant'
import indexRight from './indexRight'
import XiaquBackground from '@/assets/img/xiaqu-area-background.png'
import Xiaqu from '@/assets/img/xiaqu-area.png'
import project from '@/assets/img/safe-right-total-img@2x.png'
import QibuquBackground from '@/assets/img/qibuqu-area-background.png'
import Qibuqu from '@/assets/img/qibuqu-area.png'
import LineSeparator from '@/assets/img/line-separator.png'
import TitlePrefix from '@/assets/img/title-prefix.png'
import Chart from '@/components/chart/index'
import { getTotal } from '@/api/projectInfo'
import Chart1 from './components/chart1'
import Icon from '@/components/icon'
import New from '@/utils/new'
// import Detail from './components/detail'
import {
  getProjectProperty,
  getProjectStatistics
} from '@/api/project'
import { getAction } from '@/utils/helper'
import {
  topicDefaultList,
  treeBySpecialType
} from '@/api/tree'
import { retrieveDataServiceById } from '@/api/multiple-dataservice'
import axios from 'axios'

let _layerManager

export default {
  name: 'Growth',
  components: {
    Chart,
    indexRight,
    Chart1,
    Icon
  },
  data() {
    return {
      progressNum: '75%',
      builtInvestment: '61212',
      buildingInvestment: '91212',
      projectAllTotal: '62',
      buildingNum: '61212',
      builtNum: '61212',
      project,
      XiaquBackground,
      Xiaqu,
      QibuquBackground,
      Qibuqu,
      LineSeparator,
      TitlePrefix,
      squareKilometerSymbol: squareKilometer,
      leftHide: false,
      typeTotalList: [],
      mapInvestRateVo: [],
      chart1Options: {
        tooltip: {
          trigger: 'item',
          confine: true
        },
        color: ['#ffa862', '#696dff', '#00ffff', '#ffdda2'],
        series: [
          {
            name: '各类用地占比',
            type: 'pie',
            radius: ['50%', '80%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              color: 'white',
              alignTo: 'none',
              formatter: '{d}%'
            },
            labelLayout: {
              hideOverlap: true
            },
            labelLine: {
              length: 5,
              length2: 10
            },
            emphasis: {
              scaleSize: 3
            },
            data: [
              { value: 37, name: '基础设施' },
              { value: 17, name: '公服设施' },
              { value: 6, name: '生态景观' },
              { value: 5, name: '其他' }
            ]
          }
        ]
      },
      chart2Options: {
        tooltip: {
          trigger: 'item',
          confine: true
        },
        color: ['#696dff', '#00d075'],
        series: [
          {
            name: '建设用地占比',
            type: 'pie',
            radius: ['60%', '80%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              color: 'white',
              alignTo: 'none',
              formatter: '{d}%'
            },
            labelLayout: {
              hideOverlap: true
            },
            labelLine: {
              length: 5,
              length2: 10
            },
            emphasis: {
              scaleSize: 3
            },
            data: [
              { value: 31, name: '高新区出资' },
              { value: 7, name: '其他出资' }
            ]
          }
        ]
      },
      chart3Options: {
        tooltip: {
          trigger: 'item',
          confine: true
        },
        grid: {
          top: '30',
          bottom: '20'
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          axisTick: {
            alignWithLabel: true
          },
          data: [
            '高投集团',
            '科技城',
            '产兴公司',
            '空港建设',
            '空港置业'
          ],
          axisLabel: {
            color: '#d2e6f0',
            interval: 0
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '亿元',
            position: 'left',
            alignTicks: true,
            axisLine: {
              show: false
            },
            axisLabel: {
              color: '#d2e6f0'
            },
            splitLine: {
              lineStyle: {
                color: '#b5c9d4'
              }
            }
          },
          {
            type: 'value',
            name: '个',
            position: 'right',
            axisLine: {
              show: false
            },
            axisLabel: {
              color: '#d2e6f0'
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '亿元',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: '#00FFFF' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#0072CA' // 100% 处的颜色
                    }
                  ],
                  false
                )
              }
            },
            data: [24.2, 23.3, 14.1, 12.5, 9.6]
          },
          {
            name: '个',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#FFFF41',
                lineStyle: {
                  color: '#FFFF41'
                }
              }
            },
            yAxisIndex: 1,
            data: [2.6, 5.9, 9.0, 23.1, 22.2]
          }
        ]
      },
      chart4Options: {
        tooltip: {
          trigger: 'item',
          confine: true
        },
        // 进度条总体位置
        grid: {
          top: '-1%',
          left: '2%',
          right: '2%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          offset: 10,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          inverse: true,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          data: ['进度']
        },
        series: [
          {
            name: '完成进度',
            type: 'bar',
            barWidth: '10',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: '#00FFFF' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#0072CA' // 100% 处的颜色
                    }
                  ],
                  false
                )
              }
            },
            // 百分比样式
            label: {
              show: true,
              position: 'center',
              // position: "right",
              // distance: 50,
              offset: [-18, -2],
              fontSize: 12,
              color: '#fff',
              formatter: ''
            },
            z: 9999,
            data: [75]
          },
          {
            type: 'bar',
            barWidth: '10px',
            barGap: '-100%',
            z: 99,
            itemStyle: {
              normal: {
                color: 'rgba(255,255,255,0.2)'
              }
            },
            // 总进度
            data: [100]
          },
          {
            // 分隔
            type: 'pictorialBar',
            itemStyle: {
              normal: {
                color: 'rgba(7,13,35,0.73)'
              }
            },
            symbolRepeat: 'fixed',
            symbolMargin: 2,
            symbol: 'rect',
            symbolClip: true,
            symbolSize: [4, 10],
            symbolPosition: 'start',
            symbolOffset: [-4, 0],
            // 总进度
            data: [100],
            width: 25,
            z: 0,
            zlevel: 1
          }
        ]
      },
      toolData: [
        {
          label: '专题统计',
          value: 'topic'
        },
        {
          label: '数据分析',
          value: 'data'
        }
      ],
      activeTool: 'topic',
      optionAll: {
        cycleOptions: [{ label: '全部', value: '' }],
        areaOptions: [{ label: '全部', value: '' }],
        statusOptions: [{ label: '全部', value: '' }],
        typeOptions: [{ label: '全部', value: '' }],
        methodOptions: [
          { label: '周期', value: 'projectCycle' },
          // { label: '区域', value: 'projectArea' },
          { label: '状态', value: 'projectStatus' },
          { label: '类型', value: 'projectType' }
        ]
      },
      // 统计数据
      statisticsData: [],
      form: {
        cycle: '',
        area: '',
        status: '',
        type: '',
        method: 'projectType'
      },
      rightFilterPanelVisible: false,
      chart1_1_Options: {
        tooltip: {
          trigger: 'item',
          formatter: (parms) => {
            const seriesName = parms.seriesName
            const value = parms.data.value.toFixed(2)
            const name = parms.data.name
            const marker = parms.marker
            return (
              seriesName +
              '<br>' +
              marker +
              name +
              ': ' +
              value +
              '亿元'
            )
          },
          confine: true
        },
        color: ['#FFB222', '#20F6C6'],
        series: [
          {
            name: '项目总数',
            type: 'pie',
            radius: ['40%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              color: 'white',
              alignTo: 'none',
              formatter: '{d}%'
            },
            labelLayout: {
              hideOverlap: true
            },
            labelLine: {
              length: 5,
              length2: 10
            },
            emphasis: {
              scaleSize: 3
            },
            data: [
              { value: 75, name: '政府项目' },
              { value: 70, name: '企业项目' }
            ]
          }
        ]
      },
      chart1_2_Options: {
        tooltip: {
          trigger: 'item',
          formatter: (parms) => {
            const seriesName = parms.seriesName
            const value = parms.data.value.toFixed(2)
            const name = parms.data.name
            const marker = parms.marker
            return (
              seriesName +
              '<br>' +
              marker +
              name +
              ': ' +
              value +
              '亿元'
            )
          },
          confine: true
        },
        color: ['#638BEE', '#04CAFE'],
        series: [
          {
            name: '项目总投资',
            type: 'pie',
            radius: ['40%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              color: 'white',
              alignTo: 'none',
              formatter: '{d}%'
            },
            labelLayout: {
              hideOverlap: true
            },
            labelLine: {
              length: 5,
              length2: 10
            },
            emphasis: {
              scaleSize: 3
            },
            data: [
              { value: 423, name: '政府投资' },
              { value: 401, name: '企业投资' }
            ]
          }
        ]
      },
      chart2_1_Options: {
        tooltip: {
          trigger: 'item',
          formatter: (parms) => {
            const seriesName = parms.seriesName
            const value = parms.data.value.toFixed(2)
            const name = parms.data.name
            const marker = parms.marker
            return (
              seriesName +
              '<br>' +
              marker +
              name +
              ': ' +
              value +
              '亿元'
            )
          },
          confine: true
        },
        color: ['#2663FF', '#FFB222', '#00d075'],
        series: [
          {
            name: '项目投资占比',
            type: 'pie',
            radius: ['50%', '65%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              color: 'white',
              alignTo: 'none',
              formatter: '{d}%'
            },
            labelLayout: {
              hideOverlap: true
            },
            labelLine: {
              length: 4,
              length2: 4
            },
            emphasis: {
              scaleSize: 3
            },
            data: [
              { value: 301, name: '在建' },
              { value: 265, name: '待建' },
              { value: 258, name: '建成' }
            ]
          }
        ]
      },
      typeTotalListFixed: [
        {
          color: 'blue',
          type: '在建',
          count: 301
        },
        {
          color: 'orange',
          type: '待建',
          count: 265
        },
        {
          color: 'green',
          type: '建成',
          count: 258
        }
      ],
      toolData1: [
        {
          label: '政府投资',
          value: 'government'
        },
        {
          label: '企业投资',
          value: 'enterprise'
        }
      ],
      activeTool1: 'government',
      byStatusOptions: {},
      byTypeOptions: {},
      byZoneOptions: {},
      governmentProjectsNumber: 75,
      enterpriseProjectsNumber: 70,
      enterpriseInvestment: 423,
      governmentInvestment: 401,
      totalDataList: []
    }
  },
  computed: {
    defaultViewId() {
      return this.$store.state.layer.defaultViewId
    }
  },
  async created() {
    const { layerManager } = await getAction(
      this.defaultViewId
    )
    _layerManager = layerManager

    topicDefaultList('shengzhangdongtai').then(
      async (res) => {
        if (res.success && res.data) {
          for await (const item of res.data.reverse()) {
            item.dataList = await this.getDataList(
              item.pkid
            )
            if (!item.dataList.length) {
              return
            }
            item.serviceUrl = item.dataList[0].serviceUrl
            item.signService = item.dataList[0].signService
            item.currentDataIndex = 0
            this.$bus.$emit('showDataList', item)
            await _layerManager.addAsync(item)
          }
        }
      }
    )
  },
  mounted() {
    // this.getProjectPropertyData('projectType')
    // this.getProjectPropertyData('projectCycle')
    // this.getProjectPropertyData('projectStatus')
    this.getProjectStatisticsData()
    this.dataMounted()
    this.initInvest()
    this.getTotalData()

    New.$on('getProjectInfo', (data) => {
      console.log(data)

      const projsctStatus = this.classify(
        data,
        'projectStatus'
      )
      const projectType = this.classify(data, 'projectType')
      const projectArea = this.classify(data, 'projectArea')

      const byStatus =
        this.calculationChartValue(projsctStatus)
      this.byStatusOptions = this.investDataFixed(
        byStatus.textArr,
        byStatus.valueArr,
        byStatus.lengthArr,
        ['#FFDDA2', '#0072CA'],
        '#20F6C6'
      )
      const byType = this.calculationChartValue(projectType)
      this.byTypeOptions = this.investDataFixed(
        byType.textArr,
        byType.valueArr,
        byType.lengthArr,
        ['#20F6C6', '#0072CA'],
        '#FFDDA2'
      )
      const byZone = this.calculationChartValue(projectArea)
      this.byZoneOptions = this.investDataFixed(
        byZone.textArr,
        byZone.valueArr,
        byZone.lengthArr,
        ['#00FFFF', '#0072CA'],
        '#FFFF41'
      )
    })
    New.$on('rightTabChange', (data) => {
      switch (data) {
        case 'government':
          this.activeTool1 = 'government'
          break
        case 'enterprise':
          this.activeTool1 = 'enterprise'
          break
        default:
          break
      }
    })
  },
  watch: {
    form: {
      handler() {
        this.getProjectStatisticsData()
      },
      deep: true
    }
  },
  methods: {
    getTotalData() {
      treeBySpecialType('shengzhangdongtai').then((res) => {
        console.log(res)
        const list = res.data[0].children
        const govInfo = list[0].resourceInfo
          ? list[0].resourceInfo[0]
          : null
        const enterInfo = list[1].resourceInfo
          ? list[1].resourceInfo[0]
          : null
        const govId = govInfo.pkid
        const entId = enterInfo.pkid
        const promiseList = []
        promiseList.push(
          retrieveDataServiceById({
            pageIndex: 1,
            pageSize: 999,
            serviceId: govId
          }),
          retrieveDataServiceById({
            pageIndex: 1,
            pageSize: 999,
            serviceId: entId
          })
        )
        Promise.all(promiseList).then((res) => {
          const queryList = []
          res.forEach((val) => {
            if (val.success) {
              if (val.data && val.data.length) {
                const url =
                  val.data[0].resourceServiceDataInfoList[0]
                    .serviceDataUrl
                const dataService = decodeURI(url)
                const dataServiceUrl =
                  dataService.substring(
                    0,
                    dataService.lastIndexOf('/datasources/')
                  ) +
                  '/featureResults.json?returnContent=true&toIndex=-1&hasGeometry=false'
                const dataSourceAndDataSet = dataService
                  .substring(
                    dataService.lastIndexOf(
                      '/datasources/'
                    ) + '/datasources/'.length
                  )
                  .split('/datasets/')
                  .map((item) => decodeURI(item))
                const sqlParameter = {
                  datasetNames: [
                    `${dataSourceAndDataSet.join(':')}`
                  ],
                  getFeatureMode: 'SQL',
                  queryParameter: {
                    attributeFilter: 'SmID > 0'
                  }
                }
                const queryData =
                  JSON.stringify(sqlParameter)
                queryList.push(
                  axios.post(dataServiceUrl, queryData)
                )
              }
            }
          })
          Promise.all(queryList).then((item) => {
            const allData = []
            item.forEach((list, index) => {
              if (list.data && list.data.features) {
                const dataList = []
                list.data.features.forEach((i) => {
                  let data = {}
                  const fieldValues = i.fieldValues
                  const fieldNames = i.fieldNames
                  const projectStatusIndex =
                    fieldNames.findIndex(
                      (item) => item === '项目状态'
                    )
                  const projectValueIndex =
                    fieldNames.findIndex(
                      (item) => item === '项目投资（万元）'
                    )
                  if (fieldValues[projectStatusIndex]) {
                    data = {
                      projectStatus:
                        fieldValues[projectStatusIndex],
                      projectValue:
                        fieldValues[projectValueIndex]
                    }
                    dataList.push(data)
                    if (
                      ['在建', '待建', '建成'].includes(
                        data.projectStatus
                      )
                    ) {
                      allData.push(data)
                    }
                  }
                })
                switch (index) {
                  case 0:
                    this.governmentProjectsNumber =
                      dataList.length
                    this.chart1_1_Options.series[0].data[0].value =
                      dataList.length
                    dataList.forEach((value) => {
                      this.governmentInvestment += Number(
                        value.projectValue
                      )
                    })
                    this.governmentInvestment = Math.round(
                      this.governmentInvestment / 10000
                    )
                    this.chart1_2_Options.series[0].data[0].value =
                      this.governmentInvestment
                    break
                  default:
                    this.enterpriseProjectsNumber =
                      dataList.length
                    this.chart1_1_Options.series[0].data[1].value =
                      dataList.length
                    dataList.forEach((value) => {
                      this.enterpriseInvestment += Number(
                        value.projectValue
                      )
                    })
                    this.enterpriseInvestment = Math.round(
                      this.enterpriseInvestment / 10000
                    )
                    this.chart1_2_Options.series[0].data[1].value =
                      this.enterpriseInvestment
                    break
                }
              }
            })
            const projsctStatus = this.classify(
              allData,
              'projectStatus'
            )
            const byStatus =
              this.calculationChartValue(projsctStatus)
            console.log(byStatus)
            this.typeTotalListFixed.forEach((typeList) => {
              const index = byStatus.textArr.findIndex(
                (text) => text === typeList.type
              )
              typeList.count = Math.round(
                byStatus.valueArr[index]
              )
            })
            this.chart2_1_Options.series[0].data.forEach(
              (option) => {
                const index = byStatus.textArr.findIndex(
                  (text) => text === option.name
                )
                option.value = byStatus.valueArr[index]
              }
            )
          })
        })
      })
    },

    calculationChartValue(arr) {
      const tempObj = {
        textArr: [],
        valueArr: [],
        lengthArr: []
      }
      arr.forEach((item) => {
        let sum = 0
        tempObj.textArr.push(item.fieldName)
        item.data.forEach((val) => {
          sum += Number(val.projectValue)
        })
        tempObj.valueArr.push(sum / 10000)
        tempObj.lengthArr.push(item.data.length)
      })
      return tempObj
    },
    classify(arr, fieldName) {
      const map = {}
      const myArr = []
      for (let i = 0; i < arr.length; i++) {
        if (!map[arr[i][fieldName]]) {
          myArr.push({
            fieldName: arr[i][fieldName],
            data: [arr[i]]
          })
          map[arr[i][fieldName]] = arr[i]
        } else {
          for (let j = 0; j < myArr.length; j++) {
            if (arr[i][fieldName] === myArr[j].fieldName) {
              myArr[j].data.push(arr[i])
              break
            }
          }
        }
      }
      return myArr
    },
    toolItemClickHandle(data) {
      const { value } = data
      console.log(value)
      if (this.activeTool !== value) {
        this.activeTool = value
      }
      // this.clearLayerStyle() // 清除楼样式
      // console.log('toolItemClickHandle', data)
    },
    /**
     * 获取查询属性
     *
     * @param type 属性类型
     */
    getProjectPropertyData(type) {
      getProjectProperty(type).then((res) => {
        if (res.success) {
          const options = res.data.filter((item) => !!item)
          switch (type) {
            case 'projectType':
              this.projectTypeOptions = options.map(
                (item) => {
                  return {
                    label: item,
                    value: item
                  }
                }
              )
              this.optionAll.typeOptions.push(
                ...this.projectTypeOptions
              )
              break
            case 'projectCycle':
              this.projectCycleOptions = options.map(
                (item) => {
                  return {
                    label: item,
                    value: item
                  }
                }
              )
              this.optionAll.cycleOptions.push(
                ...this.projectCycleOptions
              )
              break
            case 'projectStatus':
              this.projectStatusOptions = options.map(
                (item) => {
                  return {
                    label: item,
                    value: item
                  }
                }
              )
              this.optionAll.statusOptions.push(
                ...this.projectStatusOptions
              )
              break
            default:
              break
          }
        }
      })
    },
    getProjectStatisticsData() {
      getProjectStatistics(
        this.form.method,
        this.form.method === 'projectStatus'
          ? this.form.status
          : '',
        this.form.method === 'projectCycle'
          ? this.form.cycle
          : '',
        this.form.method === 'projectType'
          ? this.form.type
          : ''
      )
        .then((res) => {
          this.statisticsData = []
          if (res.data) {
            this.statisticsData = res.data.filter(
              (item) => !!item.type
            )
          }
        })
        .catch((error) => {
          console.error(error)
          this.statisticsData = []
        })
    },
    dataMounted() {
      getTotal().then((res) => {
        if (res.data) {
          this.projectAllTotal = res.data.projectAllTotal
          this.buildingNum =
            res.data.statusTotalList[1].count
          this.builtNum = res.data.statusTotalList[0].count
          const sum1 = res.data.investTotalVo[0].sum1
          const sum0 = res.data.investTotalVo[0].sum0
          // 完成进度
          this.progressNum =
            Math.round((sum1 / sum0) * 10000) / 100 + '%'
          this.builtInvestment = sum1
          this.buildingInvestment = sum0
          // 进度条
          const progressNum2 =
            Math.round((sum1 / sum0) * 10000) / 100
          this.chart4Options.series[0]['data'] = [
            progressNum2
          ]
          // 类型占比
          const typeTotalList = []
          res.data.typeTotalList.forEach((val) => {
            typeTotalList.push({
              value: val.count,
              name: val.type
            })
          })
          const colorList = [
            'orange',
            'blue',
            'light-blue',
            'yellow'
          ]
          this.typeTotalList = res.data.typeTotalList
          this.typeTotalList.forEach((item, index) => {
            item.color = colorList[index]
          })
          this.chart1Options.series[0].data = typeTotalList
          // 投资占比
          const mapInvestRateVo = []
          res.data.mapInvestRateVo.forEach((val) => {
            mapInvestRateVo.push({
              value: val.total,
              name: val.type
            })
          })
          const colorList2 = ['blue', 'light-blue']
          this.mapInvestRateVo = res.data.mapInvestRateVo
          this.mapInvestRateVo.forEach((item, index) => {
            item.color = colorList2[index]
          })
          this.chart2Options.series[0].data =
            mapInvestRateVo
          // 单位排行
          const rankInvestmentList = []
          const rankProjectList = []
          const companyNameList = []
          res.data.mapRankVoList.forEach((item) => {
            rankInvestmentList.push(item.sum)
            rankProjectList.push(item.count)
            companyNameList.push(item.unit)
          })
          this.chart3Options.xAxis.data = companyNameList
          this.chart3Options.series[0].data =
            rankInvestmentList
          this.chart3Options.series[1].data =
            rankProjectList
        }
      })
    },
    handleLeftMouseDown(e) {
      this.leftX = e.clientX
      this.leftWidth = this.$refs.leftRef.offsetWidth
      document.documentElement.addEventListener(
        'mousemove',
        this.leftMove
      )
      document.documentElement.addEventListener(
        'mouseup',
        this.leftEnd
      )
    },
    leftMove(e) {
      let width = this.leftWidth + e.clientX - this.leftX
      width = width >= 500 ? 500 : width < 340 ? 340 : width
      this.$refs.leftRef.style['min-width'] = `${width}px`
      this.$refs.leftRef.style.setProperty(
        '--scroll-width',
        `${-width}px`
      )
    },
    leftEnd() {
      document.documentElement.removeEventListener(
        'mousemove',
        this.leftMove
      )
      document.documentElement.removeEventListener(
        'mouseup',
        this.leftEnd
      )
    },
    toolItemClickHandleType(data) {
      const { value } = data
      this.activeTool1 =
        this.activeTool1 === value ? undefined : value
      if (this.activeTool1) {
        New.$emit('leftTabChange', this.activeTool1)
      }
      // switch (data.value) {
      //   case 'government':
      //     this.initInvest()
      //     break
      //   case 'enterprise':
      //     this.byStatusOptions = this.investDataFixed(
      //       ['在建', '待建', '建成'],
      //       [18, 12, 30],
      //       [2, 8, 16],
      //       ['#FFDDA2', '#0072CA'],
      //       '#20F6C6'
      //     )
      //     this.byTypeOptions = this.investDataFixed(
      //       ['基础设施', '公服配音', '生态景观', '其他'],
      //       [8, 30, 12, 11],
      //       [3, 6, 2, 5],
      //       ['#20F6C6', '#0072CA'],
      //       '#FFDDA2'
      //     )
      //     this.byZoneOptions = this.investDataFixed(
      //       [
      //         '成渝国际科教城',
      //         '中国西部智造示范区',
      //         '应用性科学中心'
      //       ],
      //       [8, 10, 25],
      //       [10, 5, 14],
      //       ['#00FFFF', '#0072CA'],
      //       '#FFFF41'
      //     )
      // }
    },
    initInvest() {
      this.byStatusOptions = this.investDataFixed(
        ['在建', '待建', '建成'],
        [8, 23, 21],
        [2, 8, 16],
        ['#FFDDA2', '#0072CA'],
        '#20F6C6'
      )
      this.byTypeOptions = this.investDataFixed(
        ['基础设施', '公服配音', '生态景观', '其他'],
        [8, 16, 23, 11],
        [3, 6, 10, 5],
        ['#20F6C6', '#0072CA'],
        '#FFDDA2'
      )
      this.byZoneOptions = this.investDataFixed(
        [
          '成渝国际科教城',
          '中国西部智造示范区',
          '应用性科学中心'
        ],
        [8, 23, 9],
        [5, 12, 4],
        ['#00FFFF', '#0072CA'],
        '#FFFF41'
      )
    },
    investDataFixed(
      type,
      invest,
      item,
      barColor,
      lineColor
    ) {
      const option = {
        tooltip: {
          trigger: 'item',
          confine: true
        },
        grid: {
          top: '30',
          bottom: '40'
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          // axisTick: {
          //   alignWithLabel: true
          // },
          data: type,
          axisLabel: {
            fontSize: 12,
            color: '#d2e6f0',
            interval: 0,
            formatter: function (value) {
              const rowMax = 5
              let overValue = ''
              for (let i = 0; i < value.length; i++) {
                if (i % rowMax === 0 && i !== 0) {
                  overValue += '\n'
                  overValue += value[i]
                } else {
                  overValue += value[i]
                }
              }
              return overValue
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '亿元',
            position: 'left',
            alignTicks: true,
            nameTextStyle: {
              color: 'white'
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              color: 'white'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)'
              }
            }
          },
          {
            type: 'value',
            name: '个',
            nameTextStyle: {
              color: 'white'
            },
            position: 'right',
            axisLine: {
              show: false
            },
            axisLabel: {
              color: '#d2e6f0'
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '亿元',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: barColor[0] // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: barColor[1] // 100% 处的颜色
                    }
                  ],
                  false
                )
              }
            },
            data: invest
          },
          {
            name: '个',
            type: 'line',
            itemStyle: {
              normal: {
                color: lineColor,
                lineStyle: {
                  color: lineColor
                }
              }
            },
            yAxisIndex: 1,
            data: item
          }
        ]
      }
      return option
    },
    // 获取服务的地图服务列表
    async getDataList(pkid) {
      const list = []
      await retrieveDataServiceById({
        pageIndex: 1,
        pageSize: 999,
        serviceId: pkid
      }).then((res) => {
        if (res.success) {
          if (res.data && res.data.length) {
            // 将配置的数据列表赋给原始数据
            list.push(...res.data)
          } else {
            this.$message.warning('该服务未配置数据')
          }
        } else {
          this.$message.error(
            res.message || '服务数据查询失败'
          )
        }
      })
      return list
    }
  },
  beforeDestroy() {
    New.$off('getProjectInfo')
  }
}
</script>

<style lang="scss" scoped>
.left {
  position: fixed;
  left: 0;
  top: 60px;
  width: 340px;
  height: calc(100% - 60px);
  padding: 14px 0 14px 14px;
  background-color: transparent;
  transition: all 1s;
  --scroll-width: -340px;

  &-content {
    width: calc(100% - 32px);
    height: 100%;
    margin: 20px auto;

    &-title:not(:first-child) {
      padding-top: 26px;
      border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    &-title {
      //padding-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &-l {
        width: 4px;
        height: 12px;
        background: linear-gradient(0deg, #bcf8ff, #40ebff);
        border-radius: 0;
        margin-right: 10px;
      }

      &-r {
        flex: 1;
        word-break: keep-all;
        font-size: 14px;
        //font-weight: 800;
        background: white;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    &-echart {
      width: 100%;
      padding: 10px 0;
    }

    &-query {
      display: flex;
      align-items: center;
      justify-content: space-between;

      & span {
        word-break: keep-all;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
      }

      &-draw {
        display: flex;
        align-items: center;

        & span {
          cursor: pointer;
          margin-left: 4px;
        }
      }

      ::v-deep {
        .el-input__inner {
          width: 80px;
          background-color: transparent;
          border: 1px solid rgba(255, 255, 255, 0.4);
          border-radius: 0;
          height: 30px;
          line-height: 30px;
          color: #fff;
        }

        .el-input__icon {
          line-height: 30px;
        }
      }
    }

    ::v-deep {
      .el-form {
        padding: 10px;

        &-item {
          margin-bottom: 10px;

          &__label {
            color: white;
            padding: 0;
            line-height: 16px;
          }

          &__content {
            .el-input {
              &__inner {
                color: white;
                background: rgba(255, 255, 255, 0.2);
                border: 1px solid rgba(255, 255, 255, 0.2);
              }
            }

            .el-select {
              width: 100%;
            }
          }
        }
      }
    }
  }

  &-panel {
    height: 100%;
    background-color: rgba(7, 13, 35, 0.5);

    ::v-deep {
      .el-scrollbar {
        height: 100%;

        &__wrap {
          overflow-x: hidden;
        }

        &__view {
          padding-right: 8px;
        }
      }
    }

    .header {
      padding: 10px 11px 0px 15px;

      &-icon {
        position: relative;
        width: 60px;
        height: 60px;
        margin-right: 3px;

        img.background {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }

        img.center {
          width: 34px;
          height: 34px;
          z-index: 1;
        }
      }

      &-title {
        font-size: 14px;
        font-weight: 400;
        color: white;
      }

      .area {
        font-size: 20px;
        font-weight: bold;
        color: white;
      }

      .unit {
        font-size: 14px;
        font-weight: 400;
        color: white;
      }
    }

    .line-separator {
      width: 100%;
      padding: 0 8px;
    }

    .chart-wrapper {
      padding: 5px 10px 0px 10px;

      &:last-of-type {
        padding-bottom: 0;
      }

      &-content {
        margin-top: 0px;

        .chart {
          width: 50% !important;
        }
      }

      .chart-legend-blue {
        width: 8px;
        height: 8px;
        display: inline-block;
        background: linear-gradient(0deg, #00ffff, #0072ca);
      }

      .chart-legend-yellow {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: #ffff41;
      }

      .chart-legend-purple {
        width: 8px;
        height: 8px;
        display: inline-block;
        background: linear-gradient(0deg, #ffdda2, #0072ca);
      }

      .chart-legend-green {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: #20f6c6;
      }

      .chart-legend-light-blue {
        width: 8px;
        height: 8px;
        display: inline-block;
        background: linear-gradient(0deg, #20f6c6, #0072ca);
      }

      .chart-legend-orange {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: #ffdda2;
      }

      .progress-num {
        margin-top: 5px;
        margin-bottom: 5px;
      }

      .project-investment {
        display: flex;
        justify-content: space-between;
      }

      .progress-chart {
        margin-bottom: 5px;
        width: 100%;
        height: 32px;
        background: rgba(0, 186, 255, 0.1);
      }

      .project-num {
        width: 100%;
        height: 80px;
        background: linear-gradient(
          150deg,
          #0b566f33,
          #1b3f5633
        );
        border: 1px solid #86cfed33;
        border-radius: 6px;
        margin-left: 7px;
        margin-top: 5px;
        padding-right: 14px;
        display: flex;
        justify-content: space-between;

        .project-img {
          display: flex;

          img {
            width: 71px;
            height: 59px;
          }
        }

        &-title {
          height: 40px;
          line-height: 40px;
          font-size: 18px;
          font-weight: bold;
          color: #ffffff;
        }

        &-all {
          height: 40px;
          margin-left: 12px;
          line-height: 40px;
          font-size: 30px;
          font-weight: 800;
          color: #ffffff;
        }
      }

      .legend {
        &:not(:last-of-type) {
          margin-bottom: 13px;
        }

        &-round-icon {
          width: 7px;
          height: 7px;
          margin-right: 3px;
          margin-left: 5px;
          border-radius: 50%;

          &.blue {
            background-color: #696dff;
          }

          &.light-blue {
            background-color: #00ffff;
          }

          &.green {
            background-color: #00d075;
          }

          &.orange {
            background-color: #ffa862;
          }

          &.yellow {
            background-color: #ffdda2;
          }
        }

        &-title {
          font-size: 12px;
          font-weight: 400;
          color: white;
          margin-right: 6px;
        }

        &-value {
          font-size: 12px;
          font-weight: bold;
          color: white;
          margin-left: 30px;
        }
      }

      .chart-title {
        font-size: 12px;
        font-weight: 400;
        color: #d2e6f0;
        align-self: flex-end;
        margin-top: 4px;
      }
    }

    .title {
      &-prefix {
        position: relative;
        top: 2px;
        width: 6px;
        height: 16px;
        margin-right: 5px;
        object-fit: fill;
      }

      span {
        font-size: 14px;
        font-weight: 800;
        line-height: 14px;
        background: linear-gradient(
          180deg,
          white 0%,
          #a4bbdd 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  &-hide {
    left: var(--scroll-width);

    & > .left-close {
      background-color: red;

      &::before,
      &::after {
        transform-origin: 6px 1px;
      }
    }
  }

  &-close {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 44px;
    cursor: pointer;
    background: #192f3d;
    opacity: 0.7;

    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 7px;
      height: 2px;
      background: #fff;
      top: 50%;
      left: 50%;
      transform-origin: 1px 1px;
    }

    &::before {
      transform: translateX(-50%) translateY(-50%)
        rotateZ(-45deg);
    }

    &::after {
      transform: translateX(-50%) translateY(-50%)
        rotateZ(45deg);
    }
  }

  .bar {
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    cursor: col-resize;
  }

  ::v-deep {
    .el-scrollbar__wrap {
      overflow-x: hidden;

      .el-form {
        // background-image: url('../../../../public/img/basemaps/yxjz.png');
        padding-left: 10px;
        background-size: cover;
        background-repeat: no-repeat;
        padding-bottom: 1px !important;
        padding-top: 8px;
      }

      .el-form-item {
        margin-bottom: 0;

        &:last-child {
          margin-bottom: 7px;
        }
      }

      .el-form-item__label {
        padding: 0 !important;
        color: white !important;
        line-height: 20px !important;
      }

      .el-input__inner {
        background: rgba(65, 89, 117, 0.5) !important;
        border-color: #4a627f !important;
        height: 30px !important;
        color: #a7beca !important;
      }
    }
  }
}

.bimNav {
  &-title {
    display: flex;
    // background: url('../../../assets/bim/bim_right_top@2x.png');
    height: 40px;
    line-height: 40px;

    > div {
      margin-right: 10px;
      /*padding-bottom: 10px;*/
      cursor: pointer;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #d2e6f0;
      z-index: 666;

      &:first-child {
        margin-left: 36px;
      }
    }

    .is-active {
      //background: url('../../../assets/bim/floor_check@2x.png');
      //background-size: 100% 100%;
      color: rgba(26, 217, 255, 1);
    }
  }
}

.bimNavType {
  &-title {
    display: flex;
    height: 33px;
    line-height: 33px;
    font-weight: 800;
    color: #ffffff;
    font-family: PingFang SC;
    margin-bottom: 7px;

    > div {
      position: relative;
      margin-right: 10px;
      /*padding-bottom: 10px;*/
      cursor: pointer;
      font-size: 14px;
      // text-shadow: 0px 2px 2px #0C141D;
      background: linear-gradient(
        180deg,
        #ffffff 0%,
        #a4bbdd 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

      &:first-child {
        margin-left: 11px;
      }
    }

    .is-active {
      text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.35);
      background: linear-gradient(
        180deg,
        #00cefb 0%,
        #65faff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

      &::after {
        content: '';
        position: absolute;
        left: 25%;
        bottom: 0;
        width: 50%;
        height: 2px;
        background: #00cefb;
      }
    }
  }
}

::v-deep {
  .el-select-dropdown {
    border-color: #4a80a3;

    .el-select-dropdown__empty {
      background-color: #4a80a3;
      color: white;
    }

    .el-select-dropdown__list {
      background-color: #4a80a3;

      .el-select-dropdown__item {
        color: white;
        background-color: #4a80a3;

        &.selected {
          color: white;
        }

        &.hover {
          background-color: #28516c;
        }
      }
    }

    .popper__arrow {
      border-bottom-color: #4a80a3;

      &::after {
        border-bottom-color: #4a80a3;
      }
    }
  }
}

.project-sum {
  width: 100%;
  margin: 10px 0px 20px -5px;
  display: flex;
  justify-content: space-between;

  &-title {
    font-size: 14px;
    width: 100px;
    margin: 0px 5px;
  }

  &-num {
    font-size: 16px;
    color: #ffff41;
    margin-right: 5px;
  }

  &-pie {
    margin: -40px 0px 0px -25px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
  }

  .base-marker {
    width: 36px;
    height: 36px;
    margin-left: 8px;
    position: absolute;
  }

  &-marker {
    @extend .base-marker;
    background: url('../../../assets/img/zttj-sum.png')
      no-repeat;
    background-size: 100% 100%;
  }

  &-marker1 {
    @extend .base-marker;
    background: url('../../../assets/img/zttj-invest.png')
      no-repeat;
    background-size: 100% 100%;
  }

  &-content {
    width: 140px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;

    .base-line {
      width: 8px;
      height: 3px;
      margin-right: 10px;
    }

    &-zfxmline {
      @extend .base-line;
      background: #ffb222;
    }

    &-qyxmline {
      @extend .base-line;
      background: #20f6c6;
    }

    &-zftzline {
      @extend .base-line;
      background: #638bee;
    }

    &-qytzline {
      @extend .base-line;
      background: #04cafe;
    }

    &-num {
      font-size: 12px;
      margin-left: 10px;
    }
  }
}

.pie-marker {
  position: relative;
  margin-left: -70px;
}
</style>
